<template>
  <div class="divBox">
    <el-card :bordered="false" shadow="never" class="ivu-mt">
      <el-row class="mb20">
        <el-col :span="24">
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add" class="mr10">发布版本</el-button>
        </el-col>
      </el-row>
      <el-table border :data="tableList" v-loading="loading" highlight-current-row no-userFrom-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果">
        <el-table-column label="版本号" width="150">
          <template slot-scope="scope">
            <i class="el-icon-s-promotion" v-if="scope.row.isNew == 1"
              style="font-size: 16px;color: red;"></i><span>{{ scope.row.version}}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台类型" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.platform == 1">Android</span>
            <span v-if="scope.row.platform == 2">IOS</span>
            <span v-if="scope.row.platform == 3">PC</span>
          </template>
        </el-table-column>
        <el-table-column label="是否强制" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.isForce == 1 ? '强制' : '非强制' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下载地址" min-width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.url }}</span>
          </template>
        </el-table-column>
        <el-table-column label="升级信息" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.info }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="tableFrom.limit" :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>

    <el-dialog :title="ruleForm.id?'编辑版本信息':'新增版本信息'" :visible.sync="dialogVisible" width="700px"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="180px">
        <el-form-item label="版本号：" prop="version">
          <el-input v-model="ruleForm.version"></el-input>
        </el-form-item>
        <el-form-item label="是否为线上最新版本：" prop="isNew">
          <el-radio-group v-model="ruleForm.isNew">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="平台类型：" prop="platform">
          <el-radio-group v-model="ruleForm.platform">
            <el-radio :label="1">Android</el-radio>
            <el-radio :label="2">IOS</el-radio>
            <el-radio :label="3">PC</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否强制更新：" prop="isForce">
          <el-radio-group v-model="ruleForm.isForce">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上传安装包：">
          <div class="upload-container">
            <el-upload
              class="upload-demo mr10 mb15"
              action
              :http-request="handleUploadForm"
              :headers="myHeaders"
              :show-file-list="false"
              multiple
            >
              <div v-if="ruleForm.url" class="upLoadPicBox">
                <div class="upLoad">
                  <i class="el-icon-document-checked cameraIconfont" />
                </div>
              </div>
              <el-button v-else size="mini" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="下载链接：" prop="url">
          <el-input v-model="ruleForm.url"></el-input>
        </el-form-item>
        <el-form-item label="升级信息：" prop="info">
          <el-input type="textarea" v-model="ruleForm.info"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import SettingMer from '@/utils/settingMer'
  import { fileFileApi } from '@/api/systemSetting'
  import {
    appversionList,
    appversionSave,
    appversionInfo,
    appversionUpdate,
    appversionDelete
  } from '@/api/dataField'
  export default {
    name: 'version',
    data() {
      return {
        myHeaders: { 'X-Token': getToken() },
        tableFrom: {
          page: 1,
          limit: 15,
        },
        loading: false,
        tableList: [],
        total: 0,
        dialogVisible: false,
        ruleForm: {
          id: '',
          version: '', // 版本号
          isNew: '1', // 是否为线上最新版本（1是 2否）
          platform: '1', // 平台类型（1安卓 2苹果 3PC）
          isForce: '1', // 是否强制强制更新（1强制  2非强制）
          url: '', // 下载地址
          info: '', // 升级信息（升级备注）
        },
        rules: {
          version: [{
            required: true,
            message: '请填写版本号',
            trigger: 'blur'
          }],
          url: [{
            required: true,
            message: '请填写下载地址',
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      this.getlist()
    },
    methods: {
      // 上传
      handleUploadForm(param) {
        const formData = new FormData()
        const data = {
          model: '',
          pid: 1
        }
        formData.append('multipart', param.file)
        const loading = this.$loading({
          lock: true,
          text: '上传中，请稍候...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        fileFileApi(formData, data).then(res => {
          loading.close()
          // this.ruleForm.url = SettingMer.httpUrl + '/' + res.url
          this.ruleForm.url = res.url
          console.log('上传成功',this.ruleForm.url)
          this.$message.success('上传成功')
        }).catch(res => {
          loading.close()
        })
      },
      add() {
        this.ruleForm = {
          id: '',
          version: '', // 版本号
          isNew: 1, // 是否为线上最新版本（1是 2否）
          platform: 1, // 平台类型（1安卓 2苹果 3PC）
          isForce: 1, // 是否强制（1强制  2非强制）
          url: '', // 下载地址
          info: '', // 升级信息（升级备注）
        }
        this.dialogVisible = true
      },
      edit(row) {
        console.log('编辑', row)
        appversionInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            version: res.version,
            isNew: res.isNew,
            platform: res.platform,
            isForce: res.isForce,
            url: res.url,
            info: res.info,
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            appversionDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      close() {
        this.ruleForm = {
          id: '',
          version: '', // 版本号
          isNew: '1', // 是否为线上最新版本（1是 2否）
          platform: '1', // 平台类型（1安卓 2苹果 3PC）
          isForce: '1', // 是否强制（1强制  2非强制）
          url: '', // 下载地址
          info: '', // 升级信息（升级备注）
        }
        this.dialogVisible = false
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              appversionUpdate(this.ruleForm).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              let data = {
                version: this.ruleForm.version,
                isNew: this.ruleForm.isNew,
                platform: this.ruleForm.platform,
                isForce: this.ruleForm.isForce,
                url: this.ruleForm.url,
                info: this.ruleForm.info,
              }
              appversionSave(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      // 版本信息列表
      getlist() {
        this.loading = true
        appversionList(this.tableFrom).then(res => {
          console.log('APP版本列表', res)
          this.tableList = res.list
          this.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.tableFrom.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.tableFrom.limit = val
        this.getlist()
      }
    },
  };
</script>

<style scoped lang="scss">

</style>
